var smallMap = new Ext.Map( {
    cls: 'stop-details-map-block',
    mapOptions: {
        zoom: 14,
        draggable: false,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
});

function initStopDetailsPanel(StopId)
{
    StopId = 'D04';
    url = "http://transit.cloudapp.net/DevTransitODataService.svc/Stops('" + StopId + "')?$format=json&$callback=?";
    $.getJSON(
        url,
        function (result) {
            if (result != null) {
                Wheels.StopDetails.location = new google.maps.LatLng(result.d.Lat, result.d.Lon);
                var marker = new google.maps.Marker({ position: Wheels.StopDetails.location, map: smallMap.map });
                smallMap.map.panTo(Wheels.StopDetails.location);
                stopName.setValue(result.d.Name);
                stopId.setValue(result.d.StopId);
                getAddressByLatLng(Wheels.StopDetails.location, function (address) { stopLocation.setValue(address); });
            }
        }
    );

        url = "http://transit.cloudapp.net/DevTransitODataService.svc/Arrivals()?$filter=StopId eq '" + StopId + "'&$format=json&$callback=?";
    url = "http://transit.cloudapp.net/DevTransitODataService.svc/Stops('" + StopId + "')/Arrivals?$format=json&$callback=?";
    url = "http://transit.cloudapp.net/DevTransitODataService.svc/Arrivals()?$top=50&$format=json&$callback=?";
        $.getJSON(
        url,
        function (result) {
            if (result != null) {
                alert(result.d.results.length);
                $.each(result.d, function () {
                    var intDate = parseInt(this.ArrivalTime.replace('/Date(', '').replace(')/', ''));
                    var date = new Date(intDate);
                    this.ArrivalTime = date.format("g:i A");
                });

                var store = new Ext.data.Store({
                    model: 'Arrivals',
                    data: result.d
                });

                arrivals.setStore(store);
                arrivals.refresh();
            }
        }
    );
}

Wheels.StopDetailsPanel = Ext.extend(Ext.List, {
    items: [
    {
        xtype: 'fieldset',
        items: [
            smallMap,
            new Ext.Panel({
                style: 'height: 150px; width: 70%; float: left;',
                items: [
                    stopName = new Ext.form.TextField({ disabled: 'disabled' }),
                    stopLocation = new Ext.form.TextField({ disabled: 'disabled' }),
                    stopId = new Ext.form.TextField({ disabled: 'disabled' }),
                ]
            }),
            new Ext.Button({
                cls: 'stop-details-favorites',
                handler: function () { alert('Favorities'); }
            }),
            new Ext.Button({
                cls: 'stop-details-button',
                text: 'To Here',
                handler: function () { setCurrentGPS(Wheels.StopDetails.location, 'departure'); }
            }),
            new Ext.Button({
                cls: 'stop-details-last-button',
                text: 'From Here',
                handler: function () { setCurrentGPS(Wheels.StopDetails.location, 'arrival'); }
            }),
            arrivals = new Ext.form.ArrivalList({ cls: 'stop-details-arrivals' }),
            new Ext.Button( { cls: 'stop-details-full-button', text: 'Full stop details', handler: function () { alert('Full stop details'); } } ),
        ]
    }
    ]
});

Wheels.StopDetails = new Wheels.StopDetailsPanel();